<template>
    <view class="xilu">
        <u-navbar :safeAreaInsetTop="true" :placeholder="true" :title="topic.name" titleStyle="color:#fff"
            leftIconColor="#fff" bgColor="transparent" autoBack="true"></u-navbar>
        <view class="xilu_bg">
            <image :src="topic.image_text" mode="aspectFit"></image>
        </view>
        <view class="xilu_bg_fix" :style="{'height':statusBarHeight+'px'}">
            <image :src="topic.image_text" mode="aspectFill"></image>
        </view>
        <view class="xilu_detail">
            <view class="flex-box">
                <image :src="topic.image_text" mode="aspectFill" class="xilu_pic"></image>
                <view class="flex-grow-1 pl30">
                    <view class="fs36 colf pb10">{{topic.name}}</view>
                    <view class="fs30 cola">{{topic.forumuser_count}}人讨论</view>
                </view>
                <view class="btn1" @click="bindJoin()" v-if="!topic.is_join">+ 加入</view>
                <view class="btn1" @click="bindJoin()" v-else>已加入</view>
            </view>
            <view class="fs24 cola m-ellipsis-l2 mtb30">简介：{{topic.description}}</view>
            <view class="flex-box">
                <view class="flex-grow-1 flex-box xilu_avatar_list">
                    <image :src="item.user.avatar" mode="aspectFill" v-for="(item,index) in topic.topic_users"></image>
                </view>
                <view class="fs28 cola xilu_arrow_right flex-box" @click="topicUser()" >共{{topic.topic_join_count}}名圈友</view>
            </view>
        </view>
        <view class="xilu_classic_list fs32 col89">
            <view :class="classList[classicIndex].id == item.id?'active':''" v-for="(item,index) in classList"
                @click="changeList(index)">{{item.name}}</view>
        </view>
        <view class="xilu_trends_box">
            <mescroll-body ref="mescrollRef" :fixed="false" @init="mescrollInit" @down="downCallback" @up="upCallback"
                :down="downOption" :up="upOption">
                <!--  -->
                <Trends :trends="trends" @togglesRec="togglesRec" @togglesCollect="togglesCollect" @comment="comment" @previewImg="previewImg" @toggleFocus="toggleFocus" @bindDetail="bindDetail">
                </Trends>
                <view class="pb100"></view>
            </mescroll-body>
        </view>
        <view class="page-foot bg-white" @click="publishForum()">
            <view class="btn1">发布帖子</view>
        </view>
    </view>
</template>

<script>
    // 引入mescroll-mixins.js
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    import Trends from "@/components/trends/trends.vue"
    export default {
        mixins: [MescrollMixin], // 使用mixin
        components: {
            Trends
        },
        data() {
            return {
                statusBarHeight: 0,
                //title: "冬日美食分享",
				id: 0,
				topic:{},
                classList: [{id:2,name:"最热"},{id:0,name:"推荐"}, {id:1,name:"最新"}],
                classicIndex: 2,
				downOption: {
				    autoShowLoading: true, // 显示下拉刷新的进度条
				    textColor: "#aaa" // 下拉刷新的文本颜色
				},
                trends: [
                ]
            };
        },
        created() {
            this.getHeight();
        },
		onLoad(options) {
			this.id = options.id || 0;
			this.fetchDetail();
		},
        methods: {
            changeList(index) {
                this.classicIndex = index;
				this.mescroll.resetUpScroll();
            },
            getHeight() {
                let sysInfo = wx.getSystemInfoSync(); //状态栏的高度
                this.statusBarHeight = sysInfo.statusBarHeight + 44;
            },
			publishForum(){
				if(!this.$core.getUserinfo(true)){
					return true;
				}
				uni.navigateTo({
					url: "/discovery/public_tiezi/public_tiezi"
				})
			},
			fetchDetail(){
				this.$core.get({
					url: 'xilumarket.topic/invitation',
					data:{topic_id: this.id},
					success: (ret) => {
						this.topic = ret.data
					},
					fail: () => {
						
					}
				})
			},
			/*上拉加载的回调*/
			upCallback(page) {
				// 此处可以继续请求其他接口
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				let url = 'xilumarket.forum/lists';
				this.$core.get({
					url: url,
					loading:false,
					data:{topic_id: this.id,tab:this.classicIndex,page: pageNum,pageSize:pageSize},
					success: (ret) => {
						let data = ret.data;
						// 接口返回的当前页数据列表 (数组)
						let curPageData = data.data;
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length;
						// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
						let totalPage = data.last_page;
						// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
						//let totalSize = data.total;
						// 接口返回的是否有下一页 (true/false)
						//let hasNext = data.current_page;
				
						//设置列表数据
						if (page.num == 1) this.trends = []; //如果是第一页需手动置空列表
						this.trends = this.trends.concat(curPageData); //追加新数据
				
						// 请求成功,隐藏加载状态
						//方法一(推荐): 后台接口有返回列表的总页数 totalPage
						this.mescroll.endByPage(curPageLen, totalPage);
				
						
						setTimeout(() => {
							this.mescroll.endSuccess(curPageLen)
						}, 20)
					},
					fail: () => {
						//  请求失败,隐藏加载状态
						this.mescroll.endErr()
					}
				})
		
			},
			
			//圈子
			topicUser(){
				uni.navigateTo({
					url:'/discovery/trends_friends/trends_friends?topic_id='+this.topic.id
				})
			},
			
			// 点击收藏
			togglesCollect(e) {
				if(!this.$core.getUserinfo(true)){
					return true;
				}
				this.$core.post({url: 'xilumarket.forum/toggle_collection',data: {forum_id: e.id},success: ret => {
						this.trends[e.index] = ret.data;
						this.$forceUpdate();
					},fail: err => {}
				});
			},
			// 点击点赞
			togglesRec(e) {
				if(!this.$core.getUserinfo(true)){
					return true;
				}
				this.$core.post({url: 'xilumarket.forum/toggle_fav',data: {forum_id: e.id},success: ret => {
							this.trends[e.index] = ret.data;
							this.$forceUpdate();
					},fail: err => {
							
					}
				});
				
			},
			//加入
			bindJoin(){
				if(!this.$core.getUserinfo(true)){
					return true;
				}
				this.$core.post({url: 'xilumarket.topic/toggle_join',data: {topic_id: this.topic.id},success: ret => {
							this.topic.is_join = ret.data.is_join;
							this.$forceUpdate();
					},fail: err => {
							
					}
				});
			},
			// 点击评论
			comment(e) {
			    this.bindDetail(e);
			},
			// 关注取关
			toggleFocus(e) {
				if(!this.$core.getUserinfo(true)){
					return true;
				}
				this.$core.post({url: 'xilumarket.forum/toggle_focus',data: {user_id: e.user_id},success: ret => {
						this.trends[e.index].is_focus_count = ret.data.is_focus_count;
						this.$forceUpdate();
					},fail: err => {
						console.log(err);
					}
				});
			},
			//详情
			bindDetail(e){
				uni.navigateTo({
					url: '/discovery/trends_detail/trends_detail?id='+e.id
				})
			},
			// 点击预览
			previewImg(e) {
			    let that = this;
			    uni.previewImage({
			        current: e.picIndex,
			        urls: that.trends[e.arrIndex].images_text,
			        fail() {
			            uni.showToast({
			                title:"网络错误，请重试"
			            })
			        }
			    })
			},
        },
    }
</script>

<style lang="scss" scoped>
    .xilu {
        &_bg {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;

            image {
                width: 750rpx;
                height: 750rpx;

            }

            &::after {
                content: "";
                display: block;
                width: 750rpx;
                height: 750rpx;
                background: rgba(0, 0, 0, 0.5);
                z-index: 2;
                backdrop-filter: blur(6rpx);
                position: absolute;
                top: 0;
                left: 0;
            }
        }

        &_bg_fix {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 4;
            height: calc(var(--status-bar-height) + 44px);
            overflow: hidden;

            image {
                width: 750rpx;
                height: 750rpx;
                position: relative;
                z-index: 2;
            }

            &::after {
                content: "";
                display: block;
                width: 750rpx;
                height: 750rpx;
                background: rgba(0, 0, 0, 0.5);
                z-index: 3;
                backdrop-filter: blur(6rpx);
                position: absolute;
                top: 0;
                left: 0;
            }
        }

        &_detail {
            position: relative;
            z-index: 3;
            padding: 40rpx 30rpx;
        }

        &_pic {
            width: 100rpx;
            height: 100rpx;
            border-radius: 10rpx;
        }

        .btn1 {
            width: 130rpx;
            height: 65rpx;
            line-height: 65rpx;
            font-size: 24rpx;
        }

        &_avatar_list {
            image {
                width: 50rpx;
                height: 50rpx;
                border-radius: 50%;
                border: 1rpx solid #FFFFFF;
                margin-left: -12rpx;

                &:first-child {
                    margin-left: 0;
                }
            }
        }

        &_arrow_right {
            height: 35rpx;
            line-height: 35rpx;

            &::after {
                display: block;
                content: "";
                width: 35rpx;
                height: 35rpx;
                background: url(../../static/icon/placeorder_right.png) no-repeat center;
                background-size: 100%;
                margin-top: 2rpx;
            }
        }

        &_classic_list {
            background-color: var(--white);
            width: 100%;
            height: 88rpx;
            padding-top: 20rpx;
            overflow-x: scroll;
            white-space: nowrap;
            position: relative;
            z-index: 3;
            border-radius: 30rpx 30rpx 0 0;

            &::-webkit-scrollbar {
                display: none;
            }

            view {
                display: inline-block;
                margin-left: 55rpx;

                &.active {
                    font-size: 32rpx;
                    color: #101010;
                    position: relative;

                    &::after {
                        display: block;
                        content: "";
                        width: 31rpx;
                        height: 13rpx;
                        background: url(@/static/icon/index_active.png) no-repeat center;
                        background-size: 100%;
                        position: absolute;
                        bottom: -16rpx;
                        left: 0;
                        right: 0;
                        margin: auto;
                    }
                }

                &:first-child {
                    margin-left: 30rpx;
                }
            }
        }

        &_trends_box {
            position: relative;
            z-index: 3;
            background-color: var(--white);
        }

        .page-foot {
            .btn1 {
                width: 650rpx;
                height: 80rpx;
                border-radius: 40rpx;
                background: #ffc100;
                background-blend-mode: normal;
                margin: 10rpx auto;
                font-size: 30rpx;
                line-height: 80rpx;
            }
        }
    }
</style>
